import { Layout } from "antd";
import NavBar from "@/conponents/nav-bar";
import { Outlet, useLocation } from "react-router-dom";
const { Header, Sider, Content } = Layout;
const headerStyle = {
  textAlign: "center",
  color: "#fff",
  height: 64,
  paddingInline: 48,
  lineHeight: "64px",
  // backgroundColor: "#4096ff",
};
const contentStyle = {
  textAlign: "center",
  color: "#fff",
  backgroundColor: "#877CFF",
};
const siderStyle = {
  textAlign: "center",
  lineHeight: "120px",
  color: "#fff",
  backgroundColor: "#fff",
};
const layoutStyle = {
  borderRadius: 8,
  overflow: "hidden",
  width: "100%",
  maxWidth: "100%",
  height: "100vh",
};
const App = () => {
  const { state } = useLocation();

  return (
    <Layout style={layoutStyle}>
      <Sider width="20%" style={siderStyle}>
        <NavBar />
      </Sider>
      <Layout>
        <Header style={headerStyle}>
          {state?.title || "Xiao yu 哈哈哈哈"}
        </Header>
        <Content style={contentStyle}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};
export default App;
